<{extend name="base" /}>
<{block name="body"}>
<style>html{font-size: 100px}</style>
<div class="layui-body">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">已添加列表</li>
            <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>1])}>">样式一</a></li>
            <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>2])}>">样式二</a></li>
            <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>3])}>">样式三</a></li>
            <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>4])}>">样式四</a></li>
            <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>5])}>">样式五</a></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="left">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width: 30px;">ID</th>
                        <th>排序</th>
                        <th>样式</th>
                        <th>修改时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <{foreach name="data_lists" item="vo"}>
                    <tr>
                        <td><{$vo.id}></td>
                        <td><{$vo.sort}></td>
                        <td><{if $vo.style==1}>样式一<{elseif $vo.style==2}>样式二<{elseif $vo.style==3}>样式三<{elseif $vo.style==4}>样式四<{else}>样式五<{/if}></td>
                        <td><{$vo.updated_at}></td>
                        <td>
                            <a href="<{:url('admin/baidu/edit',['id'=>$vo['id']])}>" class="layui-btn layui-btn-normal layui-btn-mini">编辑</a>
                            <a href="<{:url('admin/baidu/delete',['id'=>$vo['id']])}>" class="layui-btn layui-btn-danger layui-btn-mini ajax-delete">删除</a>
                        </td>
                    </tr>
                    <{/foreach}>
                    </tbody>
                </table>
                </div>
                <div class="right">
                    <link rel="stylesheet" href="/baidu/css/style.css" />
                    <script src="__JS__/swiper-4.1.6.min.js"></script>
                    <div id="baidu-search">
                    <{foreach name="data_lists" item="vo"}>
                        <div data-id="<{$vo.id}>">
                            <{:get_style($vo,'baidu')}>
                        </div>
                    <{/foreach}>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<{/block}>
<{block name="script"}>
<style type="text/css">
    .left,
    .right {
        float: left;
    }

    .left {
        width: 60%;
    }

    .right {
        height: 550px;
        margin-left: 60px;
        width: 300px;
        border: 2px solid #ccc;
        border-radius: 20px;
        padding: 20px;
        background: #f1f1f1;
        box-shadow: 1px 2px #eeeeee5c;
        overflow-y: scroll;

    }
    .right::-webkit-scrollbar {display:none}
</style>
<script src="__JS__/sortable/Sortable.js" ></script>
<script>
 new Swiper ('.swiper-container', { 
     loop: true, autoHeight:true, 
     autoplay:true, // 如果需要分页器 
    pagination: { el: '.swiper-pagination',}, // 如果需要滚动条 
    scrollbar: { el: '.swiper-scrollbar', } }
 );
    var el = document.getElementById('baidu-search');
    var sortable = Sortable.create(el,{
        sort: true,
        dataIdAttr: 'data-id',
        onUpdate:function(e){
            $.ajax({
               type:'POST',
               dataType:'json',
               url:"<{:url('admin/baidu/updateSort')}>",
               data:"sort=" + sortable.toArray(),
               success:function(e){
                    layer.msg(e.msg);
               }
            });
        }
    });
    //此处按照权重设置下排序即可
    var datas = <{:to_js_array($data_lists)}>;
    sortable.sort(datas);

</script>
<{/block}>